<template>
  <div class="agency_certificate">
    <c-title :hide="false" text="电子证书"></c-title>
    <div class="certificate">
      <div class="txt">捐赠证书</div>
      <div class="no">捐赠证书编号：{{ info.certificate_no }}</div>
      <div class="line"></div>
      <div class="detail">
        <div class="nickname" v-if="info.member">{{ info.member.nickname }}</div>
        <div class="price_t">捐赠金额</div>
        <div class="price">￥{{ info.amount }}</div>
      </div>
      <div class="order">
        订单号：<span v-if="info.order">{{ info.order.order_sn }}</span>
      </div>
      <div class="time">
        支付时间：<span v-if="info.order">{{ info.order.create_time }}</span>
      </div>
      <div class="btnBox">
        <div class="btn lf" @click="saveImg">下载证书</div>
        <!-- <div class="btn rf" @click="is_share">分享证书</div> -->
      </div>
    </div>
    <!-- <img :src="dataURL" id="thecanvas" class="pos" alt="" style="width:100%;height:100%;" /> -->
    <yz_goodsPoster :defaultImg="dataURL" v-model="show">
      <div style="color:#ffffff;margin-top: -30px;text-align: center;">长按保存或分享图片</div>
    </yz_goodsPoster>
    <!-- 海报样式 -->
    <div class="certificate pos" id="img_box" v-show="loadingImg" :style="{ backgroundImage: 'url(' + image_url }">
      <div class="txt">捐赠证书</div>
      <div class="no">捐赠证书编号：{{ info.certificate_no }}</div>
      <div class="line"></div>
      <div class="detail">
        <div class="nickname" v-if="info.member">{{ info.member.nickname }}</div>
        <div class="price_t">捐赠金额</div>
        <div class="price">￥{{ info.amount }}</div>
      </div>
      <div class="order">
        订单号：<span v-if="info.order">{{ info.order.order_sn }}</span>
      </div>
      <div class="time">
        支付时间：<span v-if="info.order">{{ info.order.create_time }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import yz_goodsPoster from '../../../components/ui_components/yz_goodsPoster.vue';
export default {
  components: { yz_goodsPoster },
  data() {
    return {
      info: [],
      loadingImg: false,
      image_url: "",
      show: false
    };
  },
  activated() {
    this.dataURL = "";
    this.getData();
  },
  methods: {
    saveImg() {
      if(this.dataURL){
        this.show = true;
        return
      }
      let content = document.getElementById("img_box");
      let that = this;
      html2canvas(content, {
        useCORS: true, // 【重要】开启跨域配置
        // allowTaint: true,//允许跨域图片
        backgroundColor: null // 解决生成的图片有白边
      }).then(canvas => {
        that.dataURL = canvas.toDataURL("image/png"); //创建base64图片
        that.show = true;
      });
    },
    is_share() {
      let json = {
        title: "捐赠证书", // 分享标题
        desc: `捐赠证书编号：${this.info.certificate_no}`, // 分享描述
        link: window.location.href, // 分享链接
        imgUrl: this.image_url // 分享图标
      };
      if (this.fun.getTyep() == 7 || this.fun.isCPS()) {
        this.appShare(json);
        return;
      } else if (this.fun.getTyep() == 5) {
        //不是微信端 不访问
        return;
      }
      this.fun.wxShare(
        "",
        {},
        {
          title: json.title,
          imgUrl: json.imgUrl,
          description: json.desc,
          link: json.link
        }
      );
      this.$dialog.alert({ message: "请点击右上角微信分享" });
    },
    //app分享设置
    appShare(json) {
      if (this.fun.isCPS()) {
        if (this.fun.isIosOrAndroid() === "ios") {
          shareByH5IOS({ body: "shareByH5IOS", json: JSON.stringify(json) });
        } else {
          console.log(JSON.stringify(json));
          shareByH5Android(JSON.stringify(json));
        }
      } else {
        YDB.Share(json.title, json.desc, json.imgUrl, json.link, "Sharesback");
      }
    },
    getData() {
      $http
        .get("plugin.donation-project.frontend.record.show", { id: this.$route.params.id }, "加载中")
        .then(res => {
          if (res.result === 1) {
            console.log(res.data);
            this.info = res.data.record;
            this.image_url = res.data.image_url;
            this.loadingImg = true;
            let json = {
              title: "捐赠证书", // 分享标题
              desc: `捐赠证书编号：${this.info.certificate_no}`, // 分享描述
              link: window.location.href, // 分享链接
              imgUrl: this.image_url // 分享图标
            };
            this.fun.wxShare(
              "",
              {},
              {
                title: json.title,
                imgUrl: json.imgUrl,
                description: json.desc,
                link: json.link
              }
            );
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.certificate {
  margin: 0.75rem;
  border-radius: 0.25rem;
  background: #fff;
  padding: 1.25rem 0;
  .btnBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 1.25rem;
    .btn {
      padding: 0.68rem 1.78rem;
      border-radius: 1.28rem;
      box-sizing: border-box;
      font-size: 0.94rem;
    }
    .lf {
      background: #fe5e56;
      color: #fff;
    }
    .rf {
      border: 1px solid #fe5e56;
      color: #fe5e56;
    }
  }
  .order,
  .time {
    color: #999999;
    font-size: 0.81rem;
    text-align: left;
    padding-left: 0.75rem;
    margin-top: 0.75rem;
    span {
      color: #000;
    }
  }
  .txt {
    font-size: 1.5rem;
    line-height: 2.56rem;
    color: #00001c;
  }
  .no {
    font-size: 0.94rem;
    line-height: 1.59rem;
    color: #999999;
    margin-bottom: 1.25rem;
  }
  .line {
    margin: 0 0.75rem;
    height: 1px;
    background: #ececec;
  }
  .detail {
    margin: 1.25rem 0.75rem;
    border-radius: 0.25rem;
    // background-color: #f6fafd;
    padding: 2.59rem 0;
    .nickname {
      font-size: 1.5rem;
      line-height: 2.56rem;
    }
    .price_t {
      font-size: 0.94rem;
      color: #999999;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
    }
    .price {
      font-size: 1.5rem;
      color: #fe5e56;
      font-weight: 500;
    }
  }
}
.pos {
  position: absolute;
  left: -99999px;
  top: -99999px;
}
#img_box {
  background-size: cover;
  width: 21.94rem;
  height: 27.94rem;
  border-radius: 0.25rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
